<template>
  <view class="discover-page">
    <!-- 轮播图 -->
    <swiper class="banner" :indicator-dots="true" :autoplay="true">
      <swiper-item 
        v-for="(banner, idx) in banners" 
        :key="idx"
      >
        <image 
          class="banner-image" 
          :src="banner.image" 
          mode="aspectFill"
        ></image>
      </swiper-item>
    </swiper>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <text class="logo">发现</text>
      <input 
        class="search-input" 
        placeholder="搜索红木家具" 
        v-model="searchKey"
        @confirm="searchProducts"
      />
    </view>

    <!-- 分类导航 -->
    <view class="category-nav">
      <view 
        class="category-item" 
        v-for="(cat, idx) in categories" 
        :key="idx"
        @click="filterByCategory(cat.id)"
      >
        <image 
          class="category-icon" 
          :src="cat.icon" 
          mode="aspectFill"
        ></image>
        <text class="category-name">{{ cat.name }}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view 
        class="product-item" 
        v-for="(item, index) in filteredProducts" 
        :key="index"
        @click="goToDetail(item.id)"
      >
        <image 
          class="product-image" 
          :src="item.image" 
          mode="aspectFill"
        ></image>
        <view class="product-info">
          <text class="product-name">{{ item.name }}</text>
          <text class="product-price">¥{{ item.price.toFixed(0) }}</text>
          <view class="tags">
            <text 
              class="tag" 
              v-for="(tag, idx) in item.tags" 
              :key="idx"
            >{{ tag }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      banners: [
        { image: "/static/banners/banner1.png" },
        { image: "/static/banners/banner2.png" },
        { image: "/static/banners/banner3.png" }
      ],
      categories: [
        { id: 'sofa', name: '沙发', icon: "/static/categories/sofa.png" },
        { id: 'tea', name: '茶台', icon: "/static/categories/tea.png" },
        { id: 'cabinet', name: '橱柜', icon: "/static/categories/cabinet.png" }
      ],
      products: [
        { 
          id: 1, 
          name: "紫檀木沙发五件套", 
          price: 89999, 
          image: "/static/products/sofa1.png", 
          tags: ["新中式", "爆款"],
          categories: ['sofa'] 
        },
        { 
          id: 2, 
          name: "黄花梨茶台", 
          price: 15800, 
          image: "/static/products/tea-table.png", 
          tags: ["古典", "收藏级"],
          categories: ['tea'] 
        },
		{
		  id: 3, 
		  name: "黄花梨茶台", 
		  price: 30800, 
		  image: "/static/products/tea-table2.png", 
		  tags: ["花梨木", "高级感"],
		  categories: ['tea'] 
		},
		{
		  id: 4, 
		  name: "红木橱柜", 
		  price: 47800, 
		  image: "/static/products/cab1.png", 
		  tags: ["黄檀", "收藏级"],
		  categories: ['cabinet'] 
		}
      ],
      filteredProducts: []
    }
  },
  onLoad() {
    this.filteredProducts = this.products;
  },
  methods: {
    searchProducts() {
      if (!this.searchKey.trim()) {
        this.filteredProducts = this.products;
        return;
      }
      this.filteredProducts = this.products.filter(item => 
        item.name.includes(this.searchKey)
      );
    },
    filterByCategory(catId) {
      this.filteredProducts = this.products.filter(item => 
        item.categories.includes(catId)
      );
    },
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/discovery_products/detail?id=${id}`
      });
    }
  }
}
</script>

<style scoped>
.discover-page {
  background-color: #f8f3ed;
  min-height: 100vh;
}

.banner {
  height: 200px;
}
.banner-image {
  width: 100%;
  height: 100%;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #5c3c1c;
  color: #fff;
}
.logo {
  font-size: 18px;
  font-weight: bold;
  margin-right: 15px;
}
.search-input {
  flex: 1;
  height: 32px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 0 10px;
  color: #fff;
}

.category-nav {
  display: flex;
  padding: 15px;
  background-color: #fff;
  margin: 15px;
  border-radius: 10px;
}
.category-item {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.category-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}
.category-name {
  font-size: 12px;
}

.product-list {
  padding: 0 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product-item {
  width: 48%;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.product-image {
  width: 100%;
  height: 200px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.product-info {
  padding: 10px;
}
.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.product-price {
  color: #e60012;
  font-size: 14px;
  margin-bottom: 5px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
}
.tag {
  background-color: #f8f3ed;
  color: #5c3c1c;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>